<template>
	<div>
		<slot name="title"> </slot>
		<a-space direction="vertical" fill>
			<div class="rank_item" @click="goDetails(props.rankList[0]._id)">
				<span class="rank_item_num red">{{ 1 }}</span>
				<a class="rank_item_title">{{
					props.rankList[0][props.itemTitle]
				}}</a>
			</div>
			<div
				class="rank_item"
				v-for="item in 9"
				:key="item"
				@click="goDetails(props.rankList[item]._id)"
			>
				<span class="rank_item_num">{{ item + 1 }}</span>
				<a class="rank_item_title">{{
					props.rankList[item][props.itemTitle]
				}}</a>
			</div>
		</a-space>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
	rankList: Array,
	itemTitle: String,
	detailsUrl: String
})
function goDetails(id) {
	router.push(`${props.detailsUrl}${id}`)
}
</script>

<style lang="scss" scoped>
.rank_item {
	display: flex;
	height: 40px;
	width: 300px;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	// background-color: var(--main-2bg);
	.rank_item_num {
		width: 20px;
		font-size: 20px;
		margin: 0 var(--normal-distance);
		color: #95a5a6;
		font-style: italic;
	}
	.red {
		color: #e74c3c;
	}
	.rank_item_title {
		flex: 1;
		overflow: hidden; // 溢出隐藏
		text-overflow: ellipsis; // 溢出用省略号显示
		white-space: nowrap; // 规定段落中的文本不进行换行
		color: var(--fc-bg);
	}
	.rank_item_title:hover {
		color: brown;
		cursor: pointer;
	}
}
</style>
